React Portal hodisalarini boshqarishni o'zlashtirish: Global ilovalar uchun DOM daraxtlari bo'ylab hodisalarni delegatsiya qilish

Veb-dasturlashning keng va o'zaro bog'liq dunyosida global auditoriyaga xizmat ko'rsatadigan intuitiv va sezgir foydalanuvchi interfeyslarini yaratish juda muhimdir. React o'zining komponentlarga asoslangan arxitekturasi bilan bunga erishish uchun kuchli vositalarni taqdim etadi. Ular orasida React Portallar ota-komponent ierarxiyasidan tashqarida mavjud bo'lgan DOM tuguniga bolalarni render qilish uchun juda samarali mexanizm sifatida ajralib turadi. Bu imkoniyat ota-komponentning uslubi yoki `z-index` yig'ish konteksti cheklovlaridan xalos bo'lishi kerak bo'lgan modal oynalar, maslahatlar, ochiladigan menyular va bildirishnomalar kabi UI elementlarini yaratish uchun bebahodir.

Portallar katta moslashuvchanlikni taklif qilsa-da, ular o'ziga xos muammoni keltirib chiqaradi: hodisalarni boshqarish, ayniqsa Hujjat Ob'ekt Modeli (DOM) daraxtining turli qismlarini qamrab oladigan o'zaro ta'sirlar bilan ishlaganda. Foydalanuvchi Portal orqali render qilingan element bilan o'zaro aloqada bo'lganda, hodisaning DOM orqali harakati React komponent daraxtining mantiqiy tuzilishiga mos kelmasligi mumkin. Agar to'g'ri ishlanmasa, bu kutilmagan xatti-harakatlarga olib kelishi mumkin. Biz chuqur o'rganadigan yechim fundamental veb-dasturlash konsepsiyasida yotadi: Hodisalarni Delegatsiya qilish.

Ushbu keng qamrovli qo'llanma React Portallar bilan hodisalarni boshqarishni tushuntirib beradi. Biz React'ning sintetik hodisalar tizimining murakkabliklarini o'rganamiz, hodisalarning qalqib chiqishi va tutilishi mexanizmlarini tushunamiz va eng muhimi, ilovalaringizning global qamrovi yoki UI murakkabligidan qat'i nazar, uzluksiz va oldindan aytib bo'ladigan foydalanuvchi tajribasini ta'minlash uchun mustahkam hodisalarni delegatsiya qilishni qanday amalga oshirishni ko'rsatamiz.

React Portallarini tushunish: DOM ierarxiyalari bo'ylab ko'prik

Hodisalarni boshqarishga sho'ng'ishdan oldin, keling, React Portallar nima ekanligini va nima uchun ular zamonaviy veb-dasturlashda juda muhim ekanligini tushunishimizni mustahkamlaylik. React Portali `ReactDOM.createPortal(child, container)` yordamida yaratiladi, bu yerda `child` har qanday render qilinadigan React bolasi (masalan, element, satr yoki fragment) va `container` DOM elementidir.

Nima uchun React Portallari Global UI/UX uchun muhim?

Ota-komponentining `z-index` yoki `overflow` xususiyatlaridan qat'i nazar, barcha boshqa kontent ustida paydo bo'lishi kerak bo'lgan modal muloqot oynasini ko'rib chiqing. Agar bu modal oddiy bola sifatida render qilinsa, u `overflow: hidden` ota-komponent tomonidan kesilishi yoki `z-index` ziddiyatlari tufayli qardosh elementlar ustida paydo bo'lishda qiynalishi mumkin. Portallar buni modalning o'z React ota-komponenti tomonidan mantiqan boshqarilishiga imkon berish orqali hal qiladi, lekin jismonan to'g'ridan-to'g'ri belgilangan DOM tuguniga, ko'pincha document.body ning bolasiga render qilinadi.

• Konteyner cheklovlaridan qochish: Portallar komponentlarga ota-konteynerining vizual va uslubiy cheklovlaridan "qochish" imkonini beradi. Bu, ayniqsa, ko'rish oynasiga nisbatan yoki yig'ish kontekstining eng yuqori qismida o'zini joylashtirishi kerak bo'lgan qoplamalar, ochiladigan menyular, maslahatlar va muloqot oynalari uchun foydalidir.
• React Konteksti va Holatini saqlash: Boshqa DOM joyida render qilinganiga qaramay, Portal orqali render qilingan komponent React daraxtidagi o'z o'rnini saqlab qoladi. Bu shuni anglatadiki, u hali ham kontekstga kirishi, propslarni qabul qilishi va oddiy bola bo'lgandek bir xil holatni boshqarishda ishtirok etishi mumkin, bu esa ma'lumotlar oqimini soddalashtiradi.
• Yaxshilangan Foydalanish Imkoniyati: Portallar foydalanish imkoniyati yuqori bo'lgan UI'larni yaratishda muhim rol o'ynashi mumkin. Masalan, modal to'g'ridan-to'g'ri document.body ichiga render qilinishi mumkin, bu esa fokusni ushlab turishni boshqarishni osonlashtiradi va ekran o'quvchilarining kontentni yuqori darajadagi muloqot oynasi sifatida to'g'ri talqin qilishini ta'minlaydi.
• Global Muvofiqlik: Global auditoriyaga xizmat ko'rsatadigan ilovalar uchun izchil UI xatti-harakati juda muhim. Portallar dasturchilarga kaskadli CSS muammolari yoki DOM ierarxiyasi ziddiyatlari bilan kurashmasdan, ilovaning turli qismlarida standart UI naqshlarini (masalan, izchil modal xatti-harakati) amalga oshirish imkonini beradi.

Odatdagi sozlash `index.html` faylingizda maxsus DOM tugunini yaratishni (masalan, <div id="modal-root"></div>) va keyin unga kontentni render qilish uchun `ReactDOM.createPortal` dan foydalanishni o'z ichiga oladi. Masalan:

// public/index.html
<body>
  <div id="root"></div>
  <div id="portal-root"></div>
</body>

// MyModal.js
import React from 'react';
import ReactDOM from 'react-dom';

const portalRoot = document.getElementById('portal-root');

const MyModal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>,
    portalRoot
  );
};

export default MyModal;

Hodisalarni boshqarish jumboqligi: DOM va React daraxtlari ajralganda

React'ning sintetik hodisalar tizimi ajoyib abstraksiya mo''jizasidir. U brauzer hodisalarini normallashtiradi, hodisalarni boshqarishni turli muhitlarda izchil qiladi va document darajasida delegatsiya orqali hodisa tinglovchilarini samarali boshqaradi. React elementiga `onClick` ishlovchisini biriktirganingizda, React to'g'ridan-to'g'ri o'sha DOM tuguniga hodisa tinglovchisini qo'shmaydi. Buning o'rniga, u o'sha hodisa turi (masalan, `click`) uchun bitta tinglovchini document ga yoki React ilovangizning ildiziga biriktiradi.

Haqiqiy brauzer hodisasi (masalan, bosish) yuz berganda, u mahalliy DOM daraxtidan `document` ga qadar qalqib chiqadi. React bu hodisani ushlaydi, uni o'zining sintetik hodisa ob'ektiga o'raydi va keyin uni React komponent daraxti orqali qalqib chiqishni simulyatsiya qilib, tegishli React komponentlariga qayta yuboradi. Ushbu tizim standart DOM ierarxiyasi ichida render qilingan komponentlar uchun ajoyib ishlaydi.

Portalning o'ziga xosligi: DOMdagi aylanma yo'l

Portallar bilan bog'liq muammo aynan shu yerda yotadi: Portal orqali render qilingan element mantiqan o'zining React ota-komponentining bolasi bo'lsa-da, uning DOM daraxtidagi jismoniy joylashuvi butunlay boshqacha bo'lishi mumkin. Agar sizning asosiy ilovangiz <div id="root"></div> da o'rnatilgan bo'lsa va Portal kontentingiz <div id="portal-root"></div> (`root` ning qardoshi) ichida render qilinsa, Portal ichidan kelib chiqqan bosish hodisasi o'zining mahalliy DOM yo'li bo'ylab yuqoriga qalqib chiqadi va oxir-oqibat `document.body` ga, so'ngra `document` ga etib boradi. U `div#root` ichidagi Portalning *mantiqiy* ota-komponentining ajdodlariga biriktirilgan hodisa tinglovchilariga etib borish uchun tabiiy ravishda `div#root` orqali qalqib chiqmaydi.

Bu nomuvofiqlik shuni anglatadiki, barcha bolalardan hodisalarni ushlashni kutib, ota-elementga bosish ishlovchisini joylashtiradigan an'anaviy hodisalarni boshqarish naqshlari, agar bu bolalar Portalda render qilingan bo'lsa, ishlamay qolishi yoki kutilmagan tarzda harakat qilishi mumkin. Masalan, agar sizning asosiy `App` komponentingizda `onClick` tinglovchisi bo'lgan `div` bo'lsa va siz o'sha `div` ning mantiqiy bolasi bo'lgan Portal ichida tugmani render qilsangiz, tugmani bosish mahalliy DOM qalqib chiqishi orqali `div` ning `onClick` ishlovchisini ishga tushirmaydi.

Biroq, va bu juda muhim farq: React'ning sintetik hodisalar tizimi haqiqatan ham bu bo'shliqni to'ldiradi. Mahalliy hodisa Portaldan kelib chiqqanda, React'ning ichki mexanizmi sintetik hodisaning mantiqiy ota-komponentga baribir React komponent daraxti orqali qalqib chiqishini ta'minlaydi. Bu shuni anglatadiki, agar sizda mantiqan Portalni o'z ichiga olgan React komponentida `onClick` ishlovchisi bo'lsa, Portal ichidagi bosish o'sha ishlovchini *ishga tushiradi*. Bu React'ning hodisalar tizimining asosiy jihati bo'lib, Portallar bilan hodisalarni delegatsiya qilishni nafaqat mumkin, balki tavsiya etilgan yondashuvga aylantiradi.

Yechim: Hodisalarni delegatsiya qilish batafsil

Hodisalarni delegatsiya qilish - bu bir nechta avlod elementlariga alohida tinglovchilarni biriktirish o'rniga, umumiy ajdod elementiga bitta hodisa tinglovchisini biriktiradigan hodisalarni boshqarish uchun dizayn naqshidir. Avlod elementida hodisa (masalan, bosish) yuz berganda, u delegatsiya qilingan tinglovchisi bo'lgan ajdodga yetguncha DOM daraxti bo'ylab yuqoriga qalqib chiqadi. Keyin tinglovchi hodisa kelib chiqqan aniq elementni aniqlash va shunga mos ravishda munosabat bildirish uchun `event.target` xususiyatidan foydalanadi.

Hodisalarni delegatsiya qilishning asosiy afzalliklari

• Unumdorlikni optimallashtirish: Ko'p sonli hodisa tinglovchilari o'rniga sizda faqat bittasi bo'ladi. Bu xotira sarfini va sozlash vaqtini kamaytiradi, ayniqsa ko'plab interaktiv elementlarga ega murakkab UI'lar yoki resurs samaradorligi muhim bo'lgan global miqyosdagi ilovalar uchun foydalidir.
• Dinamik kontentni boshqarish: Dastlabki renderdan so'ng DOMga qo'shilgan elementlar (masalan, AJAX so'rovlari yoki foydalanuvchi o'zaro ta'sirlari orqali) yangi tinglovchilarni biriktirishga hojat qoldirmasdan, delegatsiya qilingan tinglovchilardan avtomatik ravishda foydalanadi. Bu dinamik ravishda render qilingan Portal kontenti uchun juda mos keladi.
• Tozaroq kod: Hodisa mantig'ini markazlashtirish kod bazangizni yanada tartibli va saqlashni osonlashtiradi.
• DOM tuzilmalari bo'ylab mustahkamlik: Biz muhokama qilganimizdek, React'ning sintetik hodisalar tizimi Portal kontentidan kelib chiqqan hodisalarning *baribir* React komponent daraxti orqali o'zlarining mantiqiy ajdodlariga qalqib chiqishini ta'minlaydi. Bu, jismoniy DOM joylashuvi farq qilishiga qaramay, hodisalarni delegatsiya qilishni Portallar uchun samarali strategiyaga aylantiradigan asosiy tamoyildir.

Hodisalarning qalqib chiqishi va tutilishi tushuntirildi

Hodisalarni delegatsiya qilishni to'liq tushunish uchun DOMdagi hodisalarning tarqalishining ikki bosqichini tushunish juda muhim:

1. Tutib olish bosqichi (Pastga tushish): Hodisa `document` ildizidan boshlanadi va nishon elementga yetguncha har bir ajdod elementini ziyorat qilib, DOM daraxti bo'ylab pastga harakatlanadi. `useCapture = true` bilan ro'yxatdan o'tgan tinglovchilar (yoki React'da `Capture` qo'shimchasini qo'shish orqali, masalan, `onClickCapture`) ushbu bosqichda ishga tushadi.
2. Qalqib chiqish bosqichi (Yuqoriga ko'tarilish): Nishon elementga yetgandan so'ng, hodisa nishon elementdan `document` ildiziga qadar har bir ajdod elementini ziyorat qilib, DOM daraxti bo'ylab orqaga qaytadi. Ko'pchilik hodisa tinglovchilari, jumladan, barcha standart React `onClick`, `onChange` va boshqalar ushbu bosqichda ishga tushadi.

React'ning sintetik hodisalar tizimi asosan qalqib chiqish bosqichiga tayanadi. Portal ichidagi elementda hodisa yuz berganda, mahalliy brauzer hodisasi o'zining jismoniy DOM yo'li bo'ylab qalqib chiqadi. React'ning ildiz tinglovchisi (odatda `document` da) bu mahalliy hodisani ushlaydi. Muhimi shundaki, React keyin hodisani qayta quradi va o'zining *sintetik* hamkasbini jo'natadi, bu esa Portal ichidagi komponentdan uning mantiqiy ota-komponentiga *React komponent daraxti bo'ylab qalqib chiqishni simulyatsiya qiladi*. Bu aqlli abstraksiya, alohida jismoniy DOM mavjudligiga qaramay, hodisalarni delegatsiya qilish Portallar bilan uzluksiz ishlashini ta'minlaydi.

React Portallari bilan hodisalarni delegatsiya qilishni amalga oshirish

Keling, keng tarqalgan stsenariyni ko'rib chiqaylik: foydalanuvchi uning kontent maydonidan tashqarida (orqa fonda) bosganda yoki `Escape` tugmachasini bosganda yopiladigan modal muloqot oynasi. Bu Portallar uchun klassik foydalanish holati va hodisalarni delegatsiya qilishning ajoyib namunasidir.

Stsenariy: Tashqarida bosish orqali yopiladigan modal

Biz React Portal yordamida modal komponentni amalga oshirmoqchimiz. Modal tugma bosilganda paydo bo'lishi va quyidagi hollarda yopilishi kerak:

• Foydalanuvchi modal kontentini o'rab turgan yarim shaffof qoplama (orqa fon) ustiga bosganda.
• Foydalanuvchi `Escape` tugmachasini bosganda.
• Foydalanuvchi modal ichidagi aniq "Yopish" tugmasini bosganda.

Bosqichma-bosqich amalga oshirish

1-qadam: HTML va Portal komponentini tayyorlash

Sizning `index.html` faylingizda portallar uchun maxsus ildiz mavjudligiga ishonch hosil qiling. Ushbu misol uchun, keling, `id="portal-root"` dan foydalanamiz.

// public/index.html (parcha)
<body>
  <div id="root"></div>
  <div id="portal-root"></div> <!-- Bizning portal nishonimiz -->
</body>

Keyin, `ReactDOM.createPortal` mantig'ini o'z ichiga olish uchun oddiy `Portal` komponentini yarating. Bu bizning modal komponentimizni toza qiladi.

// components/Portal.js
import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

interface PortalProps {
  children: React.ReactNode;
  wrapperId?: string;
}

// wrapperId uchun hali mavjud bo'lmasa, portal uchun div yaratamiz
function createWrapperAndAppendToBody(wrapperId: string) {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
}

function Portal({ children, wrapperId = 'portal-wrapper' }: PortalProps) {
  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId) as HTMLElement;
    let created = false;

    if (!element) {
      created = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // Agar biz yaratgan bo'lsak, elementni tozalaymiz
      if (created && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  // wrapperElement birinchi renderda null bo'ladi. Bu normal, chunki biz hech narsa render qilmaymiz.
  if (!wrapperElement) return null;

  return createPortal(children, wrapperElement);
}

export default Portal;

Eslatma: Soddalik uchun, oldingi misollarda `portal-root` `index.html` da qat'iy belgilangan edi. Ushbu `Portal.js` komponenti yanada dinamik yondashuvni taklif etadi, agar mavjud bo'lmasa, o'ram (wrapper) div yaratadi. Loyihangiz ehtiyojlariga eng mos keladigan usulni tanlang. Biz to'g'ridan-to'g'ri bo'lishi uchun `Modal` komponenti uchun `index.html` da ko'rsatilgan `portal-root` dan foydalanishda davom etamiz, lekin yuqoridagi `Portal.js` mustahkam alternativadir.

2-qadam: Modal komponentini yaratish

Bizning `Modal` komponentimiz o'z kontentini `children` sifatida va `onClose` qayta chaqiruvini (callback) qabul qiladi.

// components/Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

const modalRoot = document.getElementById('portal-root') as HTMLElement;

const Modal = ({ isOpen, onClose, children }: ModalProps) => {
  const modalContentRef = useRef<HTMLDivElement>(null);

  if (!isOpen) return null;

  // Escape tugmachasini bosishni boshqarish
  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };
    document.addEventListener('keydown', handleEscape);
    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, [onClose]);

  // Hodisalarni delegatsiya qilishning kaliti: orqa fonda bitta bosish ishlovchisi.
  // U shuningdek, modal ichidagi yopish tugmasiga ham bilvosita delegatsiya qiladi.
  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
    // Bosish nishoni modal ichidagi kontent emas, balki orqa fonning o'zi ekanligini tekshirish.
    // Bu yerda `modalContentRef.current.contains(event.target)` dan foydalanish juda muhim.
    // event.target - bu bosishni keltirib chiqargan element.
    // event.currentTarget - bu hodisa tinglovchisi biriktirilgan element (modal-overlay).
    if (modalContentRef.current && !modalContentRef.current.contains(event.target as Node)) {
      onClose();
    }
  };

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={handleBackdropClick}>
      <div className="modal-content" ref={modalContentRef}>
        {children}
        <button onClick={onClose} aria-label="Close modal">X</button>
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;

3-qadam: Asosiy ilova komponentiga integratsiya qilish

Bizning asosiy `App` komponentimiz modalning ochiq/yopiq holatini boshqaradi va `Modal` ni render qiladi.

// App.js
import React, { useState } from 'react';
import Modal from './components/Modal';
import './App.css'; // Asosiy uslublar uchun

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div className="App">
      <h1>React Portal hodisalarini delegatsiya qilish misoli</h1>
      <p>Turli DOM daraxtlari bo'ylab hodisalarni boshqarishni namoyish qilish.</p>

      <button onClick={openModal}>Modalni ochish</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Modalga xush kelibsiz!</h2>
        <p>Ushbu kontent React Portalda, asosiy ilovaning DOM ierarxiyasidan tashqarida render qilingan.</p>
        <button onClick={closeModal}>Ichkaridan yopish</button>
      </Modal>

      <p>Modal orqasidagi boshqa kontent.</p>
      <p>Orqa fonni ko'rsatish uchun yana bir paragraf.</p>
    </div>
  );
}

export default App;

4-qadam: Asosiy uslublar (App.css)

Modal va uning orqa fonini vizualizatsiya qilish uchun.

/* App.css */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  min-width: 300px;
  max-width: 80%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative; /* Ichki tugmalarni joylashtirish uchun kerak */
}

.modal-content button {
  margin-top: 15px;
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.modal-content button:hover {
  background-color: #0056b3;
}

.modal-content > button:last-child { /* 'X' yopish tugmasi uchun uslub */
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    color: #333;
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
    border: none;
}

.App {
  font-family: Arial, sans-serif;
  padding: 20px;
  text-align: center;
}

.App button {
  padding: 10px 20px;
  font-size: 1.1rem;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.App button:hover {
  background-color: #218838;
}

Delegatsiya mantig'ining izohi

Bizning `Modal` komponentimizda `onClick={handleBackdropClick}` `.modal-overlay` diviga biriktirilgan, bu bizning delegatsiya qilingan tinglovchimiz sifatida ishlaydi. Ushbu qoplama ichida (bu `modal-content` va uning ichidagi `X` yopish tugmasi, shuningdek, 'Ichkaridan yopish' tugmasini o'z ichiga oladi) har qanday bosish yuz berganda, `handleBackdropClick` funksiyasi bajariladi.

`handleBackdropClick` ichida:

• `event.target` *haqiqatda bosilgan* aniq DOM elementiga ishora qiladi (masalan, `modal-content` ichidagi `<h2>`, `<p>` yoki `<button>`, yoki `modal-overlay`ning o'zi).
• `event.currentTarget` hodisa tinglovchisi biriktirilgan elementga ishora qiladi, bu holda bu `.modal-overlay` divi.
• `!modalContentRef.current.contains(event.target as Node)` sharti bizning delegatsiyamizning yuragi hisoblanadi. U bosilgan element (`event.target`) `modal-content` divining avlodi *emasligini* tekshiradi. Agar `event.target` `.modal-overlay` ning o'zi yoki qoplamaning to'g'ridan-to'g'ri bolasi bo'lgan, lekin `modal-content` ning bir qismi bo'lmagan boshqa har qanday element bo'lsa, `contains` `false` qaytaradi va modal yopiladi.
• Muhimi, React'ning sintetik hodisalar tizimi, `event.target` jismonan `portal-root`da render qilingan element bo'lsa ham, mantiqiy ota (`.modal-overlay` Modal komponentida) ustidagi `onClick` ishlovchisi baribir ishga tushishini va `event.target` chuqur joylashgan elementni to'g'ri aniqlashini ta'minlaydi.

Ichki yopish tugmalari uchun, ularning `onClick` ishlovchilarida to'g'ridan-to'g'ri `onClose()` ni chaqirish ishlaydi, chunki bu ishlovchilar hodisa `modal-overlay`ning delegatsiya qilingan tinglovchisiga qalqib chiqishidan *oldin* bajariladi yoki ular aniq boshqariladi. Hatto ular qalqib chiqqan taqdirda ham, bizning `contains()` tekshiruvimiz, agar bosish kontent ichidan kelib chiqqan bo'lsa, modalning yopilishini oldini oladi.

`Escape` tugmasi tinglovchisi uchun `useEffect` to'g'ridan-to'g'ri `document`ga biriktirilgan, bu global klaviatura yorliqlari uchun keng tarqalgan va samarali naqshdir, chunki u tinglovchining komponent fokusidan qat'i nazar faol bo'lishini ta'minlaydi va u Portallar ichidan kelib chiqqanlar hamda DOMning istalgan joyidan hodisalarni ushlaydi.

Keng tarqalgan hodisalarni delegatsiya qilish stsenariylarini ko'rib chiqish

Istalmagan hodisalarning tarqalishini oldini olish: `event.stopPropagation()`

Ba'zan, hatto delegatsiya bilan ham, delegatsiya qilingan maydoningizda hodisaning yuqoriga tarqalishini aniq to'xtatmoqchi bo'lgan maxsus elementlar bo'lishi mumkin. Masalan, agar sizning modal kontentingizda bosilganda `onClose` mantig'ini ishga tushirmasligi kerak bo'lgan (hatto `contains` tekshiruvi buni allaqachon hal qilgan bo'lsa ham) ichki interaktiv elementingiz bo'lsa, siz `event.stopPropagation()` dan foydalanishingiz mumkin.

<div className="modal-content" ref={modalContentRef}>
  <h2>Modal Content</h2>
  <p>Clicking this area will not close the modal.</p>
  <button onClick={(e) => {
    e.stopPropagation(); // Bu bosishning orqa fonga qalqib chiqishini oldini olish
    console.log('Inner button clicked!');
  }}>Inner Action Button</button>
  <button onClick={onClose}>Close</button>
</div>

`event.stopPropagation()` foydali bo'lishi mumkin bo'lsa-da, uni oqilona ishlating. Haddan tashqari ko'p ishlatish hodisalar oqimini oldindan aytib bo'lmaydigan va disk raskadrovka qilishni qiyinlashtirishi mumkin, ayniqsa turli jamoalar UIga hissa qo'shishi mumkin bo'lgan katta, global miqyosdagi ilovalarda.

Delegatsiya bilan maxsus bola elementlarini boshqarish

Bosishning ichida yoki tashqarisida ekanligini tekshirishdan tashqari, hodisalarni delegatsiya qilish sizga delegatsiya qilingan maydon ichidagi turli xil bosish turlarini farqlash imkonini beradi. Siz turli xil harakatlarni bajarish uchun `event.target.tagName`, `event.target.id`, `event.target.className` yoki `event.target.dataset` atributlari kabi xususiyatlardan foydalanishingiz mumkin.

const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
  if (modalContentRef.current && modalContentRef.current.contains(event.target as Node)) {
    // Bosish modal kontenti ichida bo'ldi
    const clickedElement = event.target as HTMLElement;

    if (clickedElement.tagName === 'BUTTON' && clickedElement.dataset.action === 'confirm') {
      console.log('Tasdiqlash amali ishga tushirildi!');
      onClose();
    } else if (clickedElement.tagName === 'A') {
      console.log('Modal ichidagi havola bosildi:', clickedElement.href);
      // Ehtimol, standart xatti-harakatni oldini olish yoki dasturiy navigatsiya qilish
    }
    // Modal ichidagi elementlar uchun boshqa maxsus ishlovchilar
  } else {
    // Bosish modal kontentidan tashqarida (orqa fonda) bo'ldi
    onClose();
  }
};

Ushbu naqsh sizning Portal kontentingizdagi bir nechta interaktiv elementlarni bitta, samarali hodisa tinglovchisi yordamida boshqarishning kuchli usulini taqdim etadi.

Qachon delegatsiya qilmaslik kerak

Hodisalarni delegatsiya qilish Portallar uchun juda tavsiya etilgan bo'lsa-da, elementning o'zida to'g'ridan-to'g'ri hodisa tinglovchilari yanada mos keladigan stsenariylar mavjud:

• Juda maxsus komponent xatti-harakati: Agar komponent o'z ajdodlarining delegatsiya qilingan ishlovchilari bilan o'zaro ta'sirga kirishishi shart bo'lmagan juda ixtisoslashgan, o'z-o'zidan iborat hodisa mantig'iga ega bo'lsa.
• `onChange` bilan kiritish elementlari: Matn kiritish kabi boshqariladigan komponentlar uchun `onChange` tinglovchilari odatda tezkor holat yangilanishlari uchun to'g'ridan-to'g'ri kiritish elementiga joylashtiriladi. Garchi bu hodisalar ham qalqib chiqsa-da, ularni to'g'ridan-to'g'ri boshqarish standart amaliyotdir.
• Unumdorlik uchun muhim, yuqori chastotali hodisalar: `mousemove` yoki `scroll` kabi juda tez-tez ishga tushadigan hodisalar uchun uzoq ajdodga delegatsiya qilish `event.target`ni qayta-qayta tekshirishning kichik qo'shimcha xarajatlarini keltirib chiqarishi mumkin. Biroq, ko'pchilik UI o'zaro ta'sirlari (bosishlar, klaviatura bosishlari) uchun delegatsiya afzalliklari bu minimal xarajatdan ancha ustundir.

Ilg'or naqshlar va mulohazalar

Murakkabroq ilovalar uchun, ayniqsa turli global foydalanuvchi bazalariga xizmat ko'rsatadiganlar uchun, Portallar ichida hodisalarni boshqarish uchun ilg'or naqshlarni ko'rib chiqishingiz mumkin.

Maxsus hodisalarni jo'natish

React'ning sintetik hodisalar tizimi sizning ehtiyojlaringizga to'liq mos kelmaydigan (bu kamdan-kam uchraydi) juda maxsus chekka holatlarda, siz qo'lda maxsus hodisalarni jo'natishingiz mumkin. Bu `CustomEvent` ob'ektini yaratish va uni nishon elementdan jo'natishni o'z ichiga oladi. Biroq, bu ko'pincha React'ning optimallashtirilgan hodisalar tizimini chetlab o'tadi va ehtiyotkorlik bilan va faqat qat'iy zarur bo'lganda ishlatilishi kerak, chunki bu texnik xizmat ko'rsatish murakkabligini keltirib chiqarishi mumkin.

// Portal komponenti ichida
const handleCustomAction = () => {
  const event = new CustomEvent('my-custom-portal-event', { detail: { data: 'some info' }, bubbles: true });
  document.dispatchEvent(event);
};

// Asosiy ilovangizning biror joyida, masalan, effekt hookida
useEffect(() => {
  const handler = (event: Event) => {
    if (event instanceof CustomEvent) {
      console.log('Maxsus hodisa qabul qilindi:', event.detail);
    }
  };
  document.addEventListener('my-custom-portal-event', handler);
  return () => document.removeEventListener('my-custom-portal-event', handler);
}, []);

Ushbu yondashuv batafsil nazoratni taklif qiladi, lekin hodisa turlari va yuklamalarini ehtiyotkorlik bilan boshqarishni talab qiladi.

Hodisa ishlovchilari uchun Context API

Chuqur joylashgan Portal kontentiga ega katta ilovalar uchun `onClose` yoki boshqa ishlovchilarni props orqali uzatish prop drillingga olib kelishi mumkin. React'ning Context APIsi elegant yechimni taqdim etadi:

// context/ModalContext.js
import React, { createContext, useContext } from 'react';

interface ModalContextType {
  onClose?: () => void;
  // Kerak bo'lganda boshqa modal bilan bog'liq ishlovchilarni qo'shing
}

const ModalContext = createContext<ModalContextType>({});

export const useModal = () => useContext(ModalContext);

export const ModalProvider = ({ children, onClose }: ModalContextType & React.PropsWithChildren) => (
  <ModalContext.Provider value={{ onClose }}>
    {children}
  </ModalContext.Provider>
);

// components/Modal.js (Contextdan foydalanish uchun yangilangan)
// ... (importlar va modalRoot aniqlangan)

const Modal = ({ isOpen, onClose, children }: ModalProps) => {
  const modalContentRef = useRef<HTMLDivElement>(null);
  // ... (Escape tugmasi uchun useEffect, handleBackdropClick asosan bir xil qoladi)

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={handleBackdropClick}>
      <div className="modal-content" ref={modalContentRef}>
        <ModalProvider onClose={onClose}>{children}</ModalProvider> <!-- Kontekstni taqdim etish -->
        <button onClick={onClose} aria-label="Close modal">X</button>
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;

// components/DeeplyNestedComponent.js (modal bolalari ichida biror joyda)
import React from 'react';
import { useModal } from '../context/ModalContext';

const DeeplyNestedComponent = () => {
  const { onClose } = useModal();

  return (
    <div>
      <p>Bu komponent modal ichida chuqur joylashgan.</p>
      {onClose && <button onClick={onClose}>Chuqur joydan yopish</button>}
    </div>
  );
};

Context APIdan foydalanish ishlovchilarni (yoki boshqa tegishli ma'lumotlarni) komponent daraxtidan Portal kontentiga uzatishning toza usulini ta'minlaydi, bu esa komponent interfeyslarini soddalashtiradi va texnik xizmat ko'rsatishni yaxshilaydi, ayniqsa murakkab UI tizimlarida hamkorlik qilayotgan xalqaro jamoalar uchun.

Unumdorlikka ta'siri

Hodisalarni delegatsiya qilishning o'zi unumdorlikni oshiruvchi vosita bo'lsa-da, `handleBackdropClick` yoki delegatsiya qilingan mantig'ingizning murakkabligiga e'tibor bering. Agar siz har bir bosishda qimmat DOM o'tishlari yoki hisob-kitoblarini amalga oshirayotgan bo'lsangiz, bu unumdorlikka ta'sir qilishi mumkin. Tekshiruvlaringizni (masalan, `event.target.closest()`, `element.contains()`) iloji boricha samarali bo'lishi uchun optimallashtiring. Juda yuqori chastotali hodisalar uchun, agar kerak bo'lsa, debouncing yoki throttlingni ko'rib chiqing, garchi bu modallardagi oddiy bosish/klaviatura bosish hodisalari uchun kamroq uchraydi.

Global auditoriya uchun foydalanish imkoniyati (A11y) mulohazalari

Foydalanish imkoniyati keyinchalik o'ylanadigan narsa emas; bu fundamental talab, ayniqsa turli ehtiyojlar va yordamchi texnologiyalarga ega global auditoriya uchun qurilayotganda. Modallar yoki shunga o'xshash qoplamalar uchun Portallardan foydalanganda, hodisalarni boshqarish foydalanish imkoniyatida muhim rol o'ynaydi:

• Fokusni boshqarish: Modal ochilganda, fokus dasturiy ravishda modal ichidagi birinchi interaktiv elementga o'tkazilishi kerak. Modal yopilganda, fokus uni ochishni keltirib chiqargan elementga qaytishi kerak. Bu ko'pincha `useEffect` va `useRef` bilan boshqariladi.
• Klaviatura bilan o'zaro ta'sir: `Escape` tugmachasi bilan yopish funksiyasi (ko'rsatilganidek) muhim foydalanish imkoniyati naqshidir. Modal ichidagi barcha interaktiv elementlarning klaviatura orqali boshqarilishi mumkinligiga ishonch hosil qiling (`Tab` tugmasi).
• ARIA atributlari: Tegishli ARIA rollari va atributlaridan foydalaning. Modallar uchun `role="dialog"` yoki `role="alertdialog"`, `aria-modal="true"` va `aria-labelledby` yoki `aria-describedby` muhimdir. Ushbu atributlar ekran o'quvchilariga modalning mavjudligini e'lon qilishga va uning maqsadini tasvirlashga yordam beradi.
• Fokusni ushlab turish: Modal ichida fokusni ushlab turishni amalga oshiring. Bu foydalanuvchi `Tab` tugmasini bosganda, fokusning faqat modal *ichidagi* elementlar orqali aylanishini, orqa fondagi ilovadagi elementlar orqali emasligini ta'minlaydi. Bunga odatda modalning o'zida qo'shimcha `keydown` ishlovchilari bilan erishiladi.

Mustahkam foydalanish imkoniyati nafaqat muvofiqlik haqida; u sizning ilovangiz qamrovini kengroq global foydalanuvchi bazasiga, shu jumladan nogironligi bo'lgan shaxslarga kengaytiradi va hamma sizning UI bilan samarali o'zaro aloqada bo'lishini ta'minlaydi.

React Portal hodisalarini boshqarish bo'yicha eng yaxshi amaliyotlar

Xulosa qilib aytganda, React Portallari bilan hodisalarni samarali boshqarish uchun asosiy eng yaxshi amaliyotlar quyidagilardan iborat:

• Hodisalarni delegatsiya qilishni qabul qiling: Har doim bitta hodisa tinglovchisini umumiy ajdodga (modalning orqa foni kabi) biriktirishni afzal ko'ring va bosilgan elementni aniqlash uchun `event.target`ni `element.contains()` yoki `event.target.closest()` bilan ishlating.
• React'ning sintetik hodisalarini tushuning: Yodingizda tutingki, React'ning sintetik hodisalar tizimi Portallardan kelib chiqqan hodisalarni ularning mantiqiy React komponent daraxti bo'ylab qalqib chiqishi uchun samarali qayta yo'naltiradi, bu esa delegatsiyani ishonchli qiladi.
• Global tinglovchilarni oqilona boshqaring: `Escape` tugmachasini bosish kabi global hodisalar uchun tinglovchilarni to'g'ridan-to'g'ri `document`ga `useEffect` hooki ichida biriktiring va to'g'ri tozalashni ta'minlang.
• `stopPropagation()`ni minimallashtiring: `event.stopPropagation()`ni tejamkorlik bilan ishlating. U murakkab hodisalar oqimini yaratishi mumkin. Delegatsiya mantig'ingizni turli bosish nishonlarini tabiiy ravishda boshqaradigan qilib loyihalashtiring.
• Foydalanish imkoniyatiga ustuvorlik bering: Boshidanoq keng qamrovli foydalanish imkoniyati xususiyatlarini, jumladan, fokusni boshqarish, klaviatura navigatsiyasi va tegishli ARIA atributlarini amalga oshiring.
• DOM havolalari uchun `useRef`dan foydalaning: Portal ichidagi DOM elementlariga to'g'ridan-to'g'ri havolalarni olish uchun `useRef`dan foydalaning, bu `element.contains()` tekshiruvlari uchun juda muhimdir.
• Murakkab propslar uchun Context APIni ko'rib chiqing: Portallar ichidagi chuqur komponent daraxtlari uchun hodisa ishlovchilari yoki boshqa umumiy holatni uzatish, prop drillingni kamaytirish uchun Context APIdan foydalaning.
• Puxta sinovdan o'tkazing: Portallarning DOM-lararo tabiatini hisobga olgan holda, turli foydalanuvchi o'zaro ta'sirlari, brauzer muhitlari va yordamchi texnologiyalar bo'ylab hodisalarni boshqarishni qattiq sinovdan o'tkazing.

Xulosa

React Portallar ilg'or, vizual jihatdan jozibali foydalanuvchi interfeyslarini yaratish uchun ajralmas vositadir. Biroq, ularning kontentni ota-komponentning DOM ierarxiyasidan tashqarida render qilish qobiliyati hodisalarni boshqarish uchun o'ziga xos mulohazalarni keltirib chiqaradi. React'ning sintetik hodisalar tizimini tushunib va hodisalarni delegatsiya qilish san'atini o'zlashtirib, dasturchilar bu qiyinchiliklarni yengib o'tishlari va yuqori darajada interaktiv, unumdor va foydalanish imkoniyati yuqori bo'lgan ilovalarni yaratishlari mumkin.

Hodisalarni delegatsiya qilishni amalga oshirish sizning global ilovalaringizning asosiy DOM tuzilishidan qat'i nazar, izchil va mustahkam foydalanuvchi tajribasini ta'minlaydi. Bu toza, saqlash osonroq kodga olib keladi va kengaytiriladigan UI rivojlanishiga yo'l ochadi. Ushbu naqshlarni qabul qiling va siz keyingi loyihangizda React Portallarining to'liq kuchidan foydalanishga, butun dunyo bo'ylab foydalanuvchilarga ajoyib raqamli tajribalarni taqdim etishga yaxshi tayyor bo'lasiz.